<script setup>
import {useRouter} from "vue-router";

const router = useRouter()

function navigator() {
  /**
   * 与router-link中的写法相同
   */
  router.push("/a")
}
</script>

<template>
  <!--  路由传参方式1-->
  <router-link to="/c/c1?a=1&b=2">
    c1
  </router-link>
  <!--  路由传参方式2-->
  <router-link :to="{path:'/c/c2',query:{a:1,b:2}}">
    c2
  </router-link>
  <!--  路由传参方式3-->
  <router-link to="/c/c3/1/2/3">
    c3
  </router-link>
  <!--  路由传参方式4 注意此处仅仅可以使用命名路由-->
  <router-link :to="{name:'c3',params:{ a:4,b:5,c:6}}">
    c3
  </router-link>
  <!--  路由传参方式5 注意此处仅仅可以使用命名路由-->
  <router-link :to="{name:'c4',params:{ a:7,b:8,c:9}}">
    c4
  </router-link>
  <!--  路由传参方式6 注意此处仅仅可以使用命名路由-->
  <!--  加上replace则页面跳转改为replace模式，默认是push模式-->
  <router-link :to="{name:'c5',params:{ a:7,b:8,c:9}}" replace>
    c4
  </router-link>
  <!--  编程式路由导航-->
  <!--  注意函数可以直接传参数-->
  <button @click="navigator">按钮</button>
  <div>
    <router-view/>
  </div>
</template>

<style scoped>

</style>